<template>
  <div>

    <header>
      <div>
        <div class="title">
          <span style="border-left: 5px solid #21a6e6;">&nbsp;&nbsp;</span>
          <i class="el-icon-s-home"></i>
          历史预约
        </div>

        <span class="refresh">
          <el-link class="publishNotice_main_header_refresh" :underline="false" type="primary" @click="refresh">
            <i class="el-icon-refresh">刷新</i>
          </el-link>
        </span>
      </div>
      
    </header>

    <div id="empty" v-if="empty">
      <el-empty description="您还没有预约过，欢迎使用网上核酸检测预约系统" class="empty-img"></el-empty>
    </div>
    <!-- <el-table
      v-if="!empty"
      :data="
        histories.filter(
          (data) =>
            !search || (data!=null && data.name!=null && data.name.toLowerCase().includes(search.toLowerCase())) 
        )
      "
      style="width: 100%"
    > -->
    <!-- </el-table> -->
    <div class="list">
      <li v-for="(history, index) in histories" :key="history.aiid">
        <history-item :index="index" :item="history"></history-item>
      </li>
    </div>
  </div>
</template>

<script>
import HistoryItem from '../../../components/appointments/HistoryItem.vue';
export default {
  components: { HistoryItem },
  data() {
    return {
      search: "",
      imageUrl: 
        require("@/assets/doctor/doctoress.png"),
    };
  },
  computed: {
    userPhone: function() {
      return this.$store.state.user.userPhone;
    },
    histories: function() {
      return this.$store.state.appointment.historyAppointments;
    },
    empty: function() {
      return this.histories==null || this.histories.length == 0;
    }
  },
  methods: {
    refresh: function() {
      this.$store.dispatch("appointment/refresh_history");
    }
  },
  mounted() {
    console.log("用户" + this.$store.state.user.userPhone + "访问了历史预约页面");
    if (this.histories==null) {
      this.refresh();
    }
  },
};
</script>

<style lang="scss" scoped>
.list{
  li {
      list-style-type: none;
      margin-top: 20px;
    }
}
header {
  background: white;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;
  position: relative;
  z-index: 50;
  border-left: none;
  .title {
    float: left;
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
    width: calc(30% - 5px);
  }
  .refresh {
    float: right;
    margin-right: 5px;
    line-height: 50px;
  }
}

#empty {
  height: calc(100% - 50px);

  .empty-img {
    width: 50%;
    margin: auto;
  }
  
}
</style>


